<template>
	<view class="container">
		<view class="head-box">
			<mSearch @searchChange="searchChange" placeholder="请输入公司名称及员工姓名人才号"></mSearch>
			<view class="head1">
				<view class="head1-left" @click.stop="pre">
					上一个月
				</view>
				<picker mode="date" :value="date" fields="month" @change="bindDateChange">
					<text class="head1-text">{{ (nowDate.year||'') +'年'+( nowDate.month||'')+'月'}}</text>
				</picker>
				<view class="head1-right" @click.stop="next">
					下一个月
				</view>
			</view>
		</view>
		<view class="content-box">
			<scroll-view v-if="pageList.length" :scroll-y="true" style="height: 100%" @scrolltolower="lower"
				:refresher-enabled="false" refresher-background="#f6f6f6" refresher-default-style="black"
				:refresher-triggered="false">
				<view class="content-item" v-for="(item,index) in pageList" :key="index">
					<view class="head flex">
						<image class="avatar" :src="$mConfig.imageUrl + '/logo.png'" mode="aspectFit"></image>
						<view class="userinfo flex-1">
							<view class="userinfo-name">
								张潇潇
							</view>
							<view class="userinfo-bot">
								<text class="t1">女</text> <text class="t2">10年以上经验</text>
								<text class="t3">本科</text> <text class="t4">34岁</text>
							</view>
						</view>
					</view>
					<view class="career">
						<view class="career-top flex">
							<view class="career-flex flex-1">
								<view class="career-item flex">
									<view class="career-item-label">
										入职类型：
									</view>
									<view class="career-item-value">
										派遣工
									</view>
								</view>
								<view class="career-item flex">
									<view class="career-item-label">
										招聘类型：
									</view>
									<view class="career-item-value">
										日工
									</view>
								</view>
								<view class="career-item flex">
									<view class="career-item-label">
										到期时间：
									</view>
									<view class="career-item-value">
										2024-03-05
									</view>
								</view>
							</view>

							<view class="career-flex">
								<view class="career-item flex">
									<view class="career-item-label">
										工期：
									</view>
									<view class="career-item-value">
										3个月
									</view>
								</view>
								<view class="career-item flex">
									<view class="career-item-label">
										入职时间：
									</view>
									<view class="career-item-value">
										2024-03-05
									</view>
								</view>
								<view class="career-item flex">
									<view class="career-item-label">
										每日工资：
									</view>
									<view class="career-item-value">
										300/天
									</view>
								</view>
							</view>
						</view>
						<view class="career-top flex">
							<view class="career-flex flex-1">
								<view class="career-item career-item-last flex">
									<view class="career-item-label">
										派遣公司：
									</view>
									<view class="career-item-value">
										山西博才人力管理有限公司山西博才人力管理有限公司
									</view>
								</view>
							</view>
						</view>
						<view class="career-btn flex flex-row-reverse">
							<view class="btn btn2" @tap="toDetail(item,1)">
								考勤统计
							</view>
							<view class="btn btn3" @tap="toDetail(item,2)">
								考勤记录
							</view>
						</view>
					</view>
				</view>
				<view class="load-more-box">
					<uni-load-more :status="status" :content-text="contentText" />
				</view>
			</scroll-view>
			<m-empty-data v-else :coverUrl="stagingImg" noTxt="暂无记录"></m-empty-data>
		</view>
	</view>
</template>

<script>
	import Calendar from '../components/m-calendar/util.js';
	import mSearch from "../components/m-search/m-search.vue";
	import mEmptyData from '@/components/m-empty-data/m-empty-data.vue';
	import {
		getDate
	} from "../utils/date.js"
	export default {
		components: {
			mSearch,
			mEmptyData
		},
		data() {
			return {
				isReach: false,
				inputValue: '',
				searchFocus: false,
				tabs: [{
					value: 0,
					label: '待审核的'
				}, {
					value: 1,
					label: '已审核的'
				}],
				pageData: {
					pageNum: 1,
					count: 10,
					keyWord: ''
				},
				pageList: [{}, {}],
				// 分页
				status: 'loading',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '正在加载',
					contentnomore: '没有更多了'
				},
				// 日期
				date: '',
				weeks: [],
				calendar: {},
				nowDate: '',
				stagingImg: this.$mAssetsPath.staging
			};
		},
		watch: {
			isReach(val) {
				this.searchFocus = val;
			}
		},
		onLoad() {
			this.date = getDate(new Date(), 0).fullDate;
			// 获取日历方法实例
			this.cale = new Calendar({
				date: this.date,
				selected: [],
				startDate: '',
				endDate: '',
				range: false,
			});
			this.init(this.date)
		},
		onPullDownRefresh() {
			console.log("刷新");
			this.initData();
		},
		methods: {
			toDetail(row, type) {
				if (type == 1) {
					uni.navigateTo({
						url: "/pages/staging/attendanceSheet"
					})
				} else if (type == 2) {
					uni.navigateTo({
						url: "/pages/staging/workAttendance"
					})
				}
			},
			/**
			 * 初始化日期显示
			 * @param {Object} date
			 */
			init(date) {
				this.cale.setDate(date)
				this.weeks = this.cale.weeks
				this.nowDate = this.calendar = this.cale.getInfo(date)
			},
			// 上个月
			pre() {
				const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
				this.setDate(preDate)
			},
			// 下个月
			next() {
				const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
				this.setDate(nextDate)
			},
			bindDateChange(e) {
				const value = e.detail.value + '-1'
				console.log(this.cale.getDate(value), 23);
				this.init(value)
			},
			/**
			 * 设置日期
			 * @param {Object} date
			 */
			setDate(date) {
				this.cale.setDate(date)
				this.weeks = this.cale.weeks
				this.nowDate = this.cale.getInfo(date)
			},
			// 待审核
			clickBtn(type) {
				console.log(type, "type")
			},
			// 触底了
			lower(e) {
				console.log(e, '触底')
				this.getReachData();
			},
			inputClear(e) {
				this.isReach = false;
				this.inputValue = '';
			},
			searchChange(value) {
				this.inputValue = value;
				console.log(value, "value")
			},
			inputClear(e) {
				this.isReach = false;
				this.inputValue = '';
			},
			// 刷新
			initData() {
				uni.showLoading({
					title: "加载中……",
				})
				this.status = 'loadmore'
				this.pageData.pageNum = 1
				// tHouseholdListApi(this.pageData).then(res => {
				// 	uni.stopPullDownRefresh()
				// 	uni.hideLoading()
				// 	if (res.code == 200) {
				// 		this.pageList = res.data.list;
				// 		if (this.pageList.length >= res.data.total) {
				// 			this.status = 'nomore';
				// 		}
				// 		this.pageList = this.pageList.map(ele => {
				// 			return {
				// 				...ele
				// 			}
				// 		})
				// 	}
				// }).catch(() => {
				// 	uni.hideLoading()
				// 	uni.stopPullDownRefresh()
				// })
			},
			async getReachData() {
				uni.stopPullDownRefresh()
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.pageData.pageNum++

				// const res = await tUnitInfoListApi({
				// 	...this.pageData,
				// 	unitName: this.pageData.keyWord
				// })
				// if (res.code == 200) {
				// 	this.pageList = this.pageList.concat(res.data.list);
				// 	if (this.pageList.length >= res.data.total) this.status = 'nomore';
				// 	else this.status = 'loadmore';
				// 	this.pageList = this.pageList.map(ele => {
				// 		return {
				// 			...ele
				// 		}
				// 	})
				// }


			},
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F3F5FA;
		display: flex;
		height: 100vh;
		flex-direction: column;

		.head1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 32rpx;
			background: #fff;

			.head1-left {
				width: 159rpx;
				height: 64rpx;
				background: #FFAE13;
				border-radius: 0rpx 10rpx 10rpx 0rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 64rpx;
			}

			.head1-text {
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
			}

			.head1-right {
				width: 162rpx;
				height: 64rpx;
				background: #3A92FF;
				border-radius: 10rpx 0rpx 0rpx 10rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 64rpx;
			}
		}


		.content-box {
			flex: 1;
			padding: 20rpx 20rpx 0 20rpx;
			overflow-y: auto;
			background-color: transparent;
			position: relative;

			.content-item {
				padding: 40rpx 32rpx 40rpx 40rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.head {
					margin-bottom: 30rpx;

					.avatar {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						margin-right: 23rpx;
					}

					.userinfo {

						.userinfo-name {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}

						.userinfo-bot {
							font-weight: 500;
							font-size: 26rpx;
							color: #222222;
							margin-top: 18rpx;

							.t1 {
								margin-right: 30rpx;
							}

							.t2 {
								margin-right: 30rpx;
							}

							.t3 {
								margin-right: 30rpx;
							}
						}
					}

				}

				.career {

					.career-top {
						.career-flex {

							.career-item {
								margin-bottom: 40rpx;
								font-size: 28rpx;

								.career-item-label {
									color: #666;
									flex-shrink: 0;
								}

								.career-item-value {
									color: #222;
								}

							}

							.career-item-last {
								margin-bottom: 0;
							}
						}

					}

					.career-btn {
						margin-top: 34rpx;

						.btn {
							width: 176rpx;
							height: 63rpx;
							background: #FB7979;
							border-radius: 10rpx;
							text-align: center;
							line-height: 63rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #FFFFFF;
							margin-left: 24rpx;
						}

						.btn2 {
							background: #1DB7FF;
						}

						.btn3 {
							background: #3A92FF;
						}
					}
				}
			}
		}

	}
</style>